Input이 여러 개 일 때 (React)

리액트에서 Input이 여러 개 일때 상태관리하는 방법 이름, 아이디, 별명을 입력하는 코드가 있다. App.js 위의 사진처럼 3개의 Input과 1개의 초기화 버튼이 있을때 Input마다 state를 만들고 각 state를 업데이트 해줄 함수를 만들면 아래와 같다. App.js 하지만 위와 같은 방식은 매우 비효율적이다. useState를 3번 사용하며, 각 State를 업데이트해줄 함수...

Spread자바스크립트inputReact리액트비구조화 할당React

TIL [비구조화 할당]

객체 비구조화 할당 일반적으로 함수에 객체를 파라미터로 받아와서 사용할 경우 이라는 객체의 키 값을 이용하여 정보를 조회하는 것을 볼 수 있다. 하지만 이를 더 짧고 간편하게 쓰기 위해선 비구조화 할당을 이용하면 된다. 1. 객체를 파라미터로 받은 후 함수 내에서 비구조화 할당을 한 경우 비구조화 할당 문법은 const {변수(객체의 key와 같은)} = 객체; 라고 하면 끝이다. 2. 함수...

JavaScript비구조화 할당JavaScript

[JavaScript] 구조 분해 할당 (Destructuring)

기존 구조 분해 할당 사용시 기존의 방식은 변수에 배열의 값를 담기 위해서는 각각 값을 넣어주어야 했고 배열의 값을 출력하기 위해서는 배열에 인덱스 값을 통하여 출력하여야 했다. 하지만 구조 분해 할당을 활용하면 편리하게 배열에 값을 담거나 출력할수 있고 가독성도 좋아진다....

destructuring구조 분해 할당비구조화 할당JavaScriptjsJavaScript

Boot.React Day6

기존의 &&를 간단히 만든 조건부 렌더링입니다. 옵셔널 체이닝의 의미 data가 있으면 fetchboard를 가지고와 라는 뜻입니다. 옵셔널 체이닝은 저 data가 들어올때까지 기다리지 않고 비동기처리를 합니다. 따라서 data가 들어오지 않아도 밑으로 코드를 읽어나가기 때문에 다른 부분은 정상적으로 렌더링 됩니다. 그러다 data가 들어오면 data를 반영해 다시 렌더링을 해줍니다. 만일 ...

Props실무용 폴더구조비구조화 할당옵셔널 체이닝구조분해조건부 렌더링emition에 props 던지기Props